<template>
    <div class="editPermission">
        <el-dialog :visible.sync="centerDialogVisible" :close-on-click-modal="clickModalHide" :before-close="closeDialog" width="80%" :title="type=='add'?'添加角色':'修改角色'">
            <el-form :model="editData" size="mini" status-icon :rules="rules" ref="editData" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称：" prop="roleName">
                    <el-input v-model="editData.roleName" style="width: 40%;"></el-input>
                </el-form-item>
                <el-form-item label="角色类型：" prop="roleType">
                    <el-radio v-model="editData.roleType" label="1">超级管理员</el-radio>
                    <el-radio v-model="editData.roleType" label="0">普通角色</el-radio>
                </el-form-item>
                <el-form-item label="角色权限：" prop="rolePermission" v-show="editData.roleType == 0">
                    <div class="scroll-p-div">
                        <!--<el-tree ref="pTree" default-expand-all :data="permissionList" show-checkbox node-key="id" :props="defaultProps"></el-tree>-->
                        <div class="el-dialog-role">
                            <el-table :data="copyPermission" :show-header="false" border fit size="mini" highlight-current-row :span-method="arraySpanMethod" style="width: 100%;" height="400px">
                                <el-table-column label="序号" prop="index" align="center" width="50"> </el-table-column>
                                <el-table-column label="主标题" prop="title" width="140" align="center"> </el-table-column>
                                <el-table-column label="副序号" prop="subIndex" width="50" align="center"> </el-table-column>
                                <el-table-column label="副标题" width="150" prop="subTitle" align="center">
                                    <template slot-scope="{row}">
                                        <el-checkbox v-model="row.secondCheck" @change="changeSecondCheck(row)">{{ row.subTitle }}</el-checkbox>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" class-name="small-padding fixed-width">
                                    <template slot-scope="{row}">
                                        <el-checkbox-group v-model="row.checkedRole" @change="handleCheckedRoleChange(row)">
                                            <el-checkbox :label="item.value" v-for="(item,index) in row.thirdModule" :key="index" :disabled="!row.secondCheck">{{item.title}}</el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-button type="primary" @click="submitForm('editData')">提交</el-button>
                    <el-button @click="resetForm('editData')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "editPermission",
        props: ["dataDetail", "type"],
        data() {
            var notEmpty = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error("不能为空"));
                } else {
                    callback();
                }
            };
            return {
                defaultProps: {
                    children: "children",
                    label: "moduleName"
                },
                centerDialogVisible: false,
                clickModalHide: false,
                permissionList: [],
                editData: {
                    id: "",
                    roleType: "1",
                    rolePermission: "",
                    roleName: ""
                },
                rules: {
                    roleName: [{
                        validator: notEmpty,
                        trigger: "blur"
                    }]
                },
                count: 0,
                copyPermission: [],
            };
        },
        mounted() {
            this.getAllPermission();
        },
        methods: {
            getAllPermission() {
                let self = this;
                self.$http({
                    url: "/autoMonitor/permission/queryAllPermission",
                    method: "post"
                }).then(resp => {
                    if(resp.success) {
                        let permissionList = [];
                        let i = 1;
                        for(let per of resp.result) {
                            let span = false;
                            let subK = 1;
                            for(let _c of per.children) {
                                let obj = {
                                    value: _c.permission,
                                    index: i,
                                    span: per.children.length,
                                    title: per.moduleName,
                                    subIndex: "",
                                    subTitle: per.moduleName,
                                    checkedRole: [],
                                    secondCheck: false,
                                    thirdModule: []
                                };
                                obj.subTitle = _c.moduleName;
                                obj.subIndex = i + "." + subK;
                                if(_c.children) {
                                    for(let _cc of _c.children) {
                                        let child = {
                                            title: _cc.moduleName,
                                            value: _cc.permission
                                        };
                                        obj.thirdModule.push(child);
                                    }
                                }
                                if(span) {
                                    obj.span = 0;
                                }
                                permissionList.push(obj);
                                subK++;
                                span = true;
                            }
                            i++;
                        }
                        self.permissionList = permissionList;
                    }
                });
            },
            operateLogin() {
                let self = this;
                let permissionList = [];
                for(let data of this.copyPermission) {
                    if(data.secondCheck) {
                        permissionList.push(data.value);
                    }
                    permissionList.push(...data.checkedRole);
                }
                self.editData.rolePermission = permissionList.join(",");
                let url = this.type == "add" ? "/autoMonitor/permission/addPermission" : "/autoMonitor/permission/updatePermission";
                if(this.count == 0) {
                    self.$http({
                        url: url,
                        method: "post",
                        data: JSON.stringify(self.editData),
                        dataType: "json",
                        contentType: "application/json"
                    }).then(resp => {
                        if(resp.success) {
                            self.$eventBus.$emit("updatePermission");
                            self.$notify({
                                title: "提示",
                                message: "操作成功！",
                                type: "success"
                            });
                            self.resetForm()
                            return;
                        }
                        self.$notify({
                            title: "提示",
                            message: "操作失败",
                            type: "error"
                        });
                        this.count--;
                    });
                    this.count++;
                }
            },
            //关闭弹窗
            closeDialog() {
                this.centerDialogVisible = false;
            },
            submitForm(formName) {
                let self = this;
                this.$refs[formName].validate(valid => {
                    if(valid) {
                        self.operateLogin();
                    } else {
                        return false;
                    }
                });
            },
            resetForm() {
                this.closeDialog();
            },
            arraySpanMethod({
                row,
                columnIndex
            }) {
                if(columnIndex < 2) {
                    if(row.span === 0) {
                        return [0, 0]
                    } else {
                        return [row.span, 1]
                    }
                }
            },
            changeSecondCheck(row) {
                row.checkedRole = [];
                if(row.secondCheck) {
                    for(let c of row.thirdModule) {
                        row.checkedRole.push(c.value);
                    }
                }
            },
            handleCheckedRoleChange(value) {
                console.log(value)
            },
            showCheckPermission(rolePermission) {
                if(rolePermission) {
                    let array = rolePermission.split(",");
                    for(let p of this.copyPermission) {
                        if(array.indexOf(p.value) > -1) {
                            p.secondCheck = true;
                        }
                        for(let t of p.thirdModule) {
                            if(array.indexOf(t.value) > -1) {
                                p.checkedRole.push(t.value);
                            }
                        }
                    }
                }
            }
        },
        watch: {
            dataDetail(val) {
                let self = this;
                self.count = 0;
                self.centerDialogVisible = true;
        				self.copyPermission = JSON.parse(JSON.stringify(self.permissionList));
                self.editData = val;
                if(self.type == "edit") {
                    self.editData.roleName = val.roleName;
                    self.editData.id = val.id;
                    self.showCheckPermission(val.rolePermission);
                }
            }
        }
    };
</script>
<style scoped>
    .editPermission .el-dialog__body {
        padding: 0px 20px;
    }
    .editPermission .el-form-item {
        margin-bottom: 12px;
    }
    .editPermission .el-input--mini .el-input__inner {
        height: 26px;
    }
    .editPermission .el-radio {
        margin-right: 5px;
    }
    .scroll-p-div {
        /*height: 240px;*/
        overflow-x: hidden;
        overflow-y: auto;
    }
    .editPermission .el-table td {
    	font-size: 14px;
    }
    .editPermission .el-table td .el-checkbox-group {
        text-align: left;
    }
</style>